<script lang="jsx">
export default {
  name: "CrudRightToolbar",
  inject: ["crud"],
  data() {
    return {
      // 显隐数据
      value: [],
      // 弹出层标题
      title: "显示/隐藏",
      // 是否显示弹出层
      open: false,
    };
  },
  props: {
    /* 是否显示检索条件 */
    showSearch: {
      type: Boolean,
      default: true,
    },
    /* 显隐列信息 */
    columns: {
      type: Array,
    },
    /* 是否显示检索图标 */
    search: {
      type: Boolean,
      default: true,
    },
    /* 显隐列类型（transfer穿梭框、checkbox复选框） */
    showColumnsType: {
      type: String,
      default: "checkbox",
    },
    /* 右外边距 */
    gutter: {
      type: Number,
      default: 10,
    },
  },
  computed: {
    style() {
      const ret = {};
      if (this.gutter) {
        ret.marginRight = `${this.gutter / 2}px`;
      }
      return ret;
    },
  },
  created() {
    if (this.showColumnsType === "transfer") {
      // 显隐列初始默认隐藏列
      for (let item in this.columns) {
        if (this.columns[item].visible === false) {
          this.value.push(parseInt(item));
        }
      }
    }
  },
  methods: {
    // 搜索
    toggleSearch() {
      this.$emit("update:showSearch", !this.showSearch);
    },
    // 刷新
    refresh() {
      this.$emit("queryTable");
    },
    // 右侧列表元素变化
    dataChange(data) {
      for (let item in this.columns) {
        const key = this.columns[item].key;
        this.columns[item].visible = !data.includes(key);
      }
    },
    // 打开显隐列dialog
    showColumn() {
      this.open = true;
    },
    // 勾选
    checkboxChange(event, item) {
      item.visible = event;
    },
  },
  render() {
    return (
      <div class="top-right-btn" style={this.style}>
        <el-row>
          {this.search && (
            <el-tooltip
              class="item"
              effect="dark"
              content={this.showSearch ? "隐藏搜索" : "显示搜索"}
              placement="top"
            >
              <el-button
                size="mini"
                circle
                icon="el-icon-search"
                onClick={this.toggleSearch}
              />
            </el-tooltip>
          )}
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <el-button
              size="mini"
              circle
              icon="el-icon-refresh"
              onClick={this.refresh}
            />
          </el-tooltip>
          {this.columns && (
            <el-tooltip
              class="item"
              effect="dark"
              content="显隐列"
              placement="top"
            >
              {this.showColumnsType === "transfer" ? (
                <el-button
                  size="mini"
                  circle
                  icon="el-icon-menu"
                  onClick={this.showColumn}
                />
              ) : (
                <el-dropdown
                  trigger="click"
                  hide-on-click={false}
                  style="padding-left: 12px"
                >
                  <el-button size="mini" circle icon="el-icon-menu" />
                  <el-dropdown-menu slot="dropdown">
                    {this.columns.map(
                      (item) =>
                        item.type !== "index" &&
                        item.type !== "selection" &&
                        typeof item.visible !== "undefined" && (
                          <el-dropdown-item key={item.key}>
                            <el-checkbox
                              checked={item.visible}
                              onChange={(event) =>
                                this.checkboxChange(event, item)
                              }
                              label={item.label}
                            />
                          </el-dropdown-item>
                        )
                    )}
                  </el-dropdown-menu>
                </el-dropdown>
              )}
            </el-tooltip>
          )}
        </el-row>
        <el-dialog
          title={this.title}
          visible={this.open}
          onUpdate:visible={(val) => (this.open = val)}
          append-to-body
        >
          <el-transfer
            titles={["显示", "隐藏"]}
            v-model={this.value}
            data={this.columns}
            onChange={this.dataChange}
          />
        </el-dialog>
      </div>
    );
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-transfer__button {
  border-radius: 50%;
  padding: 12px;
  display: block;
  margin-left: 0px;
}
::v-deep .el-transfer__button:first-child {
  margin-bottom: 10px;
}
</style>
